import React from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled';
import { styled } from '@mui/material/styles';

// Styled Typography for logo - Dark Mode version
const DarkModeTypography = styled(Typography)(({ theme, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 700,
  fontSize: '3rem',
  fontFamily: 'kornucopiaregular',
  position: 'relative',
  display: 'inline-block',
  letterSpacing: '-1px',
  px: '10px',
  textShadow: '0 0 10px rgba(97, 218, 251, 0.6), 0 0 15px rgba(97, 218, 251, 0.4)',
  minHeight: 0,
  height: 'auto',
  lineHeight: 1,
  borderRadius: 20,
  border: 'none',
  textTransform: 'none',
  color: 'white',

  '& > span': {
    position: 'relative',
    zIndex: 2,
  },

  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: `linear-gradient(
      45deg, 
      rgba(97, 218, 251, 0.3) 0%, 
      rgba(97, 218, 251, 0.6) 25%, 
      rgba(97, 218, 251, 0.1) 50%, 
      rgba(97, 218, 251, 0.6) 75%, 
      rgba(97, 218, 251, 0.3) 100%
      )`,
    opacity: 0.6,
    filter: 'blur(50px)',
    zIndex: 1,
  },

  '&:hover': {
    transform: 'scale(1.03)',
    textShadow: '0 0 15px rgba(97, 218, 251, 0.8)',
  },
}));

// Styled Typography for logo - Light Mode version
const LightModeTypography = styled(Typography)(({ theme }) => ({
  fontWeight: 700,
  fontSize: props => props.fontSize || '3rem',
  // Removed kornucopiaregular font to match original TopIcons styling
  letterSpacing: '0.5px',
  color: theme.palette.primary.main,
  cursor: 'pointer',
  transition: 'color 0.3s ease',
  position: 'relative',
  display: 'inline-block',

  '&:hover': {
    color: theme.palette.primary.dark,
    transform: 'scale(1.03)',
  },
}));

const LogoComponent = ({ 
  darkMode, 
  isHomePage, 
  toggleDashboardDrawer, 
  logoText = "startersoft.io", 
  linkTo = "/",
  showPlayIcon = true,
  fontSize,
  enableAnimation = false
}) => {
  const StyledLogoText = darkMode ? DarkModeTypography : LightModeTypography;
  
  return (
    <>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Link 
          to={linkTo} 
          style={{ 
            display: 'flex', 
            alignItems: 'center', 
            textDecoration: 'none', 
            cursor: 'pointer' 
          }}
        >
          <div className={darkMode && enableAnimation ? 'logo-dark-mode' : ''} data-text={logoText}>
            <StyledLogoText isHomePage={isHomePage} fontSize={fontSize}>
              <span>{logoText}</span>
            </StyledLogoText>
          </div>
        </Link>
        {showPlayIcon && darkMode && (
          <IconButton
            color="primary"
            aria-label="dashboard"
            onClick={toggleDashboardDrawer}
            size="large"
            sx={{
              fontSize: '3rem',
              width: '3rem',
              height: '3rem',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              ml: '-5px',
            }}
          >
            <PlayCircleFilledIcon sx={{ fontSize: '3rem', color: 'white' }} />
          </IconButton>
        )}
      </Box>
      
      {enableAnimation && (
        <style jsx global>{`
          /* Glitch effect variables */
          :root {
            --move1: inset(50% 50% 50% 50%);
            --move2: inset(31% 0 40% 0);
            --move3: inset(39% 0 15% 0);
            --move4: inset(45% 0 40% 0);
            --move5: inset(45% 0 6% 0);
            --move6: inset(14% 0 61% 0);
          }
          
          /* Dark Mode Logo Glitch Effect */
          .logo-dark-mode {
            position: relative;
            display: inline-block;
          }
          
          .logo-dark-mode::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 3rem;
            font-family: kornucopiaregular;
            letter-spacing: -1px;
            color: transparent;
            animation: glitch_4011 1s infinite;
            animation-timing-function: steps(2, end);
            text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px rgba(97, 218, 251, 0.8);
            background-color: transparent;
            opacity: 0.3;
            filter: blur(1px);
            z-index: 1;
            pointer-events: none;
          }
          
          @keyframes glitch_4011 {
            0% {
              clip-path: var(--move1);
              transform: translate(0px,-10px);
            }
            10% {
              clip-path: var(--move2);
              transform: translate(-10px,10px);
            }
            20% {
              clip-path: var(--move3);
              transform: translate(10px,0px);
            }
            30% {
              clip-path: var(--move4);
              transform: translate(-10px,10px);
            }
            40% {
              clip-path: var(--move5);
              transform: translate(10px,-10px);
            }
            50% {
              clip-path: var(--move6);
              transform: translate(-10px,10px);
            }
            60% {
              clip-path: var(--move1);
              transform: translate(10px,-10px);
            }
            70% {
              clip-path: var(--move3);
              transform: translate(-10px,10px);
            }
            80% {
              clip-path: var(--move2);
              transform: translate(10px,-10px);
            }
            90% {
              clip-path: var(--move4);
              transform: translate(-10px,10px);
            }
            100% {
              clip-path: var(--move1);
              transform: translate(0);
            }
          }
        `}</style>
      )}
    </>
  );
};

export default LogoComponent;